<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="main1">
    </div>
    <div id="main2">
    </div>
    <div id="main">  
    </div>
</body>
<!-- 模板 -->
<script type="text/template" id="template">
    <ul>
        {{#arr}}
        <li>
            <div class="hd">{{name}}的信息</div>
            <div class="bd">
                <p>姓名：{{name}}</p>
                <p>性别：{{sex}}</p>
                <p>年龄：{{age}}</p>
            </div>
        </li>
        {{/arr}}
    </ul>
</script>
<script type="module">
    import Mustache from './lib/mustache.js'
    //--------------------------------------------------
    // 简单对象{{}}
    let temp1=` <h1>我是一个{{a}},就{{b}}看这</h1>`;
    let data1={a:"土狗",b:"喜欢"};
    let domStr1=Mustache.render(temp1,data1);
    let main1=document.getElementById("main1");
    main1.innerHTML=domStr1;
    //--------------------------------------------------
    // 循环简单数组: {{#数组名}}{{.}} {{/数组名}}
    let temp2=`    
        <ul>
            {{#arr}}
            <li>{{.}}</li>
            {{/arr}}
        </ul>`;
    let data2={
       arr: ['A','B','C']};
    let domStr2=Mustache.render(temp2,data2);
    let main2=document.getElementById("main2");
    main2.innerHTML=domStr2;
    //---------------------------------------------
    // 循环
    let  template=document.getElementById('template').innerHTML;//在没有反引号模板的做法，使用<script type="text/template" id="template">标签
    // var template = `
    // <ul>
    //     {{#arr}}
    //     <li>
    //         <div class="hd">{{name}}的信息</div>
    //         <div class="bd">
    //             <p>姓名：{{name}}</p>
    //             <p>性别：{{sex}}</p>
    //             <p>年龄：{{age}}</p>
    //         </div>
    //     </li>
    //     {{/arr}}
    // </ul>`;
    var data = {
        arr: [{
                "name": "小明",
                "age": 12,
                "sex": "男"
            },
            {
                "name": "小话",
                "age": 16,
                "sex": "女"
            },
            {
                "name": "小米",
                "age": 22,
                "sex": "男"
            },
        ]
    };
    // 生成dom结构字符串
    var domStr = Mustache.render(template, data);
    // console.log(domStr)
    var main=document.getElementById('main');
    main.innerHTML=domStr;
  

</script>

</html>